import React, { memo, useContext } from 'react'
import { UserContext, TokenContext } from './context'
import { useUserToken } from './hooks'

const Home = memo(function (props) {
  const uesr = useContext(UserContext)
  const token = useContext(TokenContext)
  console.log(uesr, token)

  return (
    <div>
      <h1>Home Page {token}</h1>
    </div>
  )
})

const About = memo(function (props) {
  const { user, token } = useUserToken()
  console.log(user)

  return (
    <div>
      <h1>About Page: {token}</h1>
    </div>
  )
})

export default memo(function App() {
  return (
    <div>
      <h2>App Page</h2>
      <Home />
      <About />
    </div>
  )
})
